<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>20_CSS复合选择器-子代选择器</title>
        <style>
            /* .u1 > li {
                color: red;
            } */

            .d1 > div {
                color: red;
            }

        </style>
    </head>
    <body>
        <!-- 经典1的结构  子代容易出现问题 -->
        <!-- <ul class="u1">
            <li>貂蝉</li>
            <li>王昭君</li>
            <li>杨玉环</li>
            <ul>
                <li>马志强</li>
                <li>老卢</li>
                <li>鲑鱼</li>
                <li>小宇</li>
                <li>大鹏</li>
            </ul>
        </ul> -->


         <!-- 经典2 标签结构的语义  后续会再次提出-->
        <div class="d1">
            <p>123
                <div>456</div>
                <div>999</div>
                <p>66666</p>
            </p>

            <p>000</p>

            <div>789</div>
        </div>
    </body>
</html>